.skills-com {
  width: 100%;
  position: relative;
  padding-bottom: 50px;

  .show-box {
    position: relative;
    background: #151515;
    border-radius: 64px;
    text-align: center;
    padding: 60px 50px;
    margin: 0 auto;
    margin-top: -60px;
    max-width: 960px;
    z-index: $level3;

    .title {
      font-size: 45px;
      font-weight: 700;
    }

    .skill-box {
      @include vC;
      flex-direction: column;
      width: 100%;

      .skill-target {
        width: 100%;
        margin-top: 12px;
      }
    }
  }

  .background-image-left {
    top: 28%;
    position: absolute;
    bottom: 0;
    width: 40%;
    z-index: $level4;

    img {
      width: 500px;
      object-fit: cover;
    }
  }
}

@media screen and (max-width: 431px) {
  .skills-com {
    .show-box {
      padding: 25px 25px;
      margin: 0 12px;
    }

    .precent {
      display: none;
    }
  }
}

@media screen and (max-width: 751px) and (min-width: 432px) {
  .skills-com {
    .show-box {
      padding: 25px 25px;
      margin: 0 24px;
    }
  }
}
